// 上传头像
const upload = document.querySelector('#upload')
const avatar = document.querySelector('.figure img')

// 昵称
const nickname = document.querySelector('[name=nickname]')

// 省市区
const province = document.querySelector('[name=province]')
const city = document.querySelector('[name=city]')
const area = document.querySelector('[name=area]')


// 接口文档：https://www.showdoc.com.cn/1834761734600444/8477923164668939


// 功能列表
// 功能1: 上传头像
// 功能2: 页面初始化: 获取个人信息，并渲染到页面中
// 功能3: 省市区的联动效果
// 功能4: 保存个人信息，刷新页面，可以看到自己保存的个人信息
//        说明：由于接口提供的是相同账号下的个人信息，所以当大家都在练习的时候，会出现互相覆盖的情况



// 要求： 
// 1. 使用 axios 发送请求
// 2. 设置 axios 请求根路径
// 3. 配合 async await 完成功能


//上传头像

axios.defaults.baseURL = 'http://ajax-api.itheima.net'

avatar.addEventListener('click', () => {
  upload.click()
})

upload.addEventListener('change', async function () {
  let file = this.files[0]
  if (!file) return
  const fd = new FormData()
  fd.append('avatar', file)
  const { data: { data: url } } = await axios.post('/api/file', fd)
  avatar.src = url.url

})

// 便于获取所需城市名
function getName(province) {
  let index = province.value
  return province.children[index].innerHTML
}






//个人数据渲染
async function fn() {
  const { data: { data: ifmastion } } = await axios.get('/api/settings')
  const { avatar: src, nickname: name, province, city, area } = ifmastion
  avatar.src = src
  nickname.value = name
  provinces(province)
  citys(province, city)
  areas(province, city, area)
} fn()
//省 渲染

async function provinces(provinceNum) {
  const { data: { data: provinceData } } = await axios.get('/api/province')
  let num = null
  let provinceStr = provinceData.map((item, i) => {
    if (provinceNum === item) { num = i + 1 }
    return `
    <option value = ${i + 1} >${item}</option>
      `  }).join('')
  province.innerHTML = `<option value="">--省--</option> ` + provinceStr
  province.value = num
}

//市渲染


async function citys(provinceNum, cityNum) {
  const { data: { data: cityData } } = await axios.get('/api/city', {
    params: {
      pname: provinceNum
    }
  })
  let num = 0
  let cityStr = cityData.map((item, i) => {
    if (cityNum === item) { num = i + 1 }
    return `
    <option value = ${i + 1} >${item}</option>
      `  }).join('')
  city.innerHTML = `<option value="0">--市--</option>` + cityStr
  city.value = num
}


//区 渲染
async function areas(provinceNum, cityNum, areaNum) {
  const { data: { data: areaData } } = await axios.get('/api/area', {
    params: {
      pname: provinceNum,
      cname: cityNum
    }
  })
  let num = 0
  let areaStr = areaData.map((item, i) => {
    if (areaNum === item) { num = i + 1 }
    return `
    <option value = ${i + 1} >${item}</option>
      `  }).join('')
  area.innerHTML = `<option value='0'>--区--</option>` + areaStr
  area.value = num
}
1

//城市改变
province.addEventListener('change', function () {
  let provinceName = getName(province)
  citys(provinceName)
  area.innerHTML = `<option value='0'>--区--</option>`
})
//市区改变
city.addEventListener('change', function () {
  let provinceName = getName(province)
  let cityName = getName(city)
  areas(provinceName, cityName)
})

//修改



document.querySelector('.btn-primary').addEventListener('click', async function (e) {
  e.stopPropagation()
  e.preventDefault()
  let nicknameChange = nickname.value
  let provinceChange = getName(province)
  let cityChange = getName(city)
  let areaChange = getName(area)
  let avatarChange = avatar.src

  let res = await axios.put('/api/settings', {
      nickname: nicknameChange,
      province: provinceChange,
      city: cityChange,
      area: areaChange,
      avatar: avatarChange
  })

  if (res.status !== 200) return alert('res.statusTexts')
  fn()

})